import { AppContext } from "../AppProvider"
import { useContext } from "react"
import "./index.css"
let TodoList = () => {
    //使用context
    let { state: { data, activeButton }, dispatch } = useContext(AppContext);
    // console.log(state)

    //勾选状态变化的时候

    let handleChange = (id: string, e: any) => {
        // console.log(e.target.checked)
        dispatch({ type: "CHANGE_TODO", payload: { targetid: id, checked: e.target.checked } })
        dispatch({ type: "CHANGE_STATUS", payload: activeButton })
    }

    //通过state,创建列表

    let lis = data.map(({ id, completed, todo }) => {
        return (
            <li className={completed ? 'completed' : ''} key={id}>
                <input type="checkbox" checked={completed} onChange={
                    (e: any) => {
                        handleChange(id, e)
                    }
                } />
                <b>{todo}</b>
                <button onClick={() => {
                    handleDelete(id)
                }}>X</button>
            </li>
        )
    })

    //删除

    let handleDelete = (id: string) => {
        dispatch({ type: "DELETE_TODO", payload: id })
    }

    return (
        <ul className="list">
            {lis}
        </ul>
    )
}

export default TodoList